﻿<template>
  <div>
    <!-- <a-card :bordered="false"> -->
    <a-drawer
      title="设置货架"
      placement="right"
      @close="onDrawerClose"
      :visible="visible"
      width="80%"
      :getContainer="false"
    >
      <div class="table-operator">
        <a-button type="primary" icon="plus" @click="hanldleAdd()" v-if="hasPerm('PB_Rack.Add')">新建</a-button>
        <a-button
          v-if="hasPerm('PB_Rack.Delete')"
          type="primary"
          icon="minus"
          @click="handleDelete(selectedRowKeys)"
          :disabled="!hasSelected()"
          :loading="loading"
        >删除</a-button
        >
        <a-button type="primary" icon="redo" @click="getDataList()">刷新</a-button>
        <a-popconfirm
          title="请选择打印的类型"
          cancel-text="批量A4"
          ok-text="批量条码"
          @confirm="confirms"
          @cancel="cancels"
        >
          <a-button
            type="primary"
            icon="redo"
            @click="handlePrints(selectedRowKeys)"
            :disabled="!hasSelecteds()"
            :loading="loading"
          >批量打印</a-button
          >
        </a-popconfirm>
      </div>

      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="10">
            <a-col :md="6" :sm="24">
              <a-form-item>
                <a-input v-model="Name" placeholder="编号/名称" />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-button
                type="primary"
                @click="
                  () => {
                    this.pagination.current = 1
                    this.getDataList()
                  }
                "
              >查询</a-button
              >
              <a-button style="margin-left: 8px" @click="reset()">重置</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <a-table
        ref="table"
        :columns="columns"
        :rowKey="(row) => row.Id"
        :dataSource="data"
        :pagination="pagination"
        :loading="loading"
        @change="handleTableChange"
        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        :bordered="true"
        size="small"
      >
        <span slot="action" slot-scope="text, record">
          <template>
            <a-popconfirm
              title="请选择打印的类型"
              cancel-text="打印A4"
              ok-text="打印条码"
              @confirm="confirm"
              @cancel="cancel"
            >
              <a @click="handlePrint(record.Id, record.Code)" v-if="hasPerm('PB_Rack.Print')">打印</a></a-popconfirm
              >
            <a-divider type="vertical" />
            <a @click="handleEdit(record.Id)" v-if="hasPerm('PB_Rack.Edit')">编辑</a>
            <a-divider type="vertical" />
            <a @click="handleDelete([record.Id])" v-if="hasPerm('PB_Rack.Delete')">删除</a>
            <a-divider type="vertical" />
          </template>
        </span>
      </a-table>
      <a-drawer
        width="30%"
        title="选择打印机"
        :visible="boxflag"
        :confirm-loading="boxLoading"
        @ok="handleOk"
        @close="boxflag = false"
      >
        <a-spin :spinning="loading">
          <a-form-model ref="form" :model="Print" :rules="rules" v-bind="layout">
            <a-form-model-item label="货架" prop="RackID" v-show="false">
              <a-input v-model="Print.RackID" disabled />
            </a-form-model-item>
            <a-form-model-item label="货架编码" prop="RackCode">
              <a-input v-model="Print.RackCode" disabled />
            </a-form-model-item>
            <a-form-model-item label="打印机" prop="PrintID">
              <a-select style="width: 100%" v-model="Print.PrintID">
                <a-select-option v-for="item in printlist" :key="item.Id" :value="item.Id">
                  {{ item.Name }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-form-model>
        </a-spin>

        <div style="height: 10px"></div>
        <div
          :style="{
            position: 'absolute',
            right: 0,
            bottom: 0,
            width: '100%',
            borderTop: '1px solid #e9e9e9',
            padding: '10px 16px',
            background: '#fff',
            textAlign: 'right',
            zIndex: 1,
          }"
        >
          <a-button
            :style="{ marginRight: '8px' }"
            @click="
              () => {
                boxflag = false
              }
            "
          >取消</a-button
          >
          <a-button type="primary" @click="handleOk">打印</a-button>
        </div>
      </a-drawer>
      <edit-form ref="editForm" :parentObj="this" :storObj="storData"></edit-form>
    </a-drawer>
    <BatchPrinting ref="batchPrinting" :parentObj="this"></BatchPrinting>
  </div>
</template>

<script>
import EditForm from './EditForm'
import BatchPrinting from './BatchPrinting'
const columns = [
  { title: '货架编号', dataIndex: 'Code', width: '25%' },
  { title: '货架名称', dataIndex: 'Name', width: '35%' },
  { title: '操作', dataIndex: 'action', scopedSlots: { customRender: 'action' } }
]

export default {
  components: {
    EditForm,
    BatchPrinting
  },
  mounted () {
    this.getDataList()
  },
  data () {
    return {
      Name: '',
      storData: {},
      data: [],
      visible: false,
      pagination: {
        current: 1,
        pageSize: 25,
        showTotal: (total, range) => `总数:${total} 当前:${range[0]}-${range[1]}`
      },
      filters: {},
      sorter: { field: 'Id', order: 'asc' },
      loading: false,
      columns,
      queryParam: [],
      selectedRowKeys: [],
      did: '',
      Print: {},
      PrintID: '',
      selectedRows: [],
      printlist: [],
      boxLoading: false,
      boxflag: false,
      printflag: false,
      RackCode: '',
      pid: '',
      selectid: '',
      codes: '',
      layout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 20 }
      },
      rules: {
        PrintID: [{ required: true, message: '请选择打印机', trigger: 'change' }]
      }
    }
  },
  created () {
    this.getDataList()
    this.getprintlist()
  },
  methods: {
    handleTableChange (pagination, filters, sorter) {
      this.pagination = { ...pagination }
      this.filters = { ...filters }
      this.sorter = { ...sorter }
      this.getDataList()
    },
    handleSelectPrint (id) {
      this.$refs.batchPrinting.openDrawer(id, '打印货架')
    },
    reset () {
      this.Name = ''
      this.getDataList()
    },
    getDataList () {
      this.selectedRowKeys = []
      this.queryParam = [{ Condition: 'AreaId', Keyword: this.did }, { Condition: 'Name', Keyword: this.Name }]
      this.loading = true
      this.$http
        .post('/PB/PB_Rack/GetDataListByMoreCondition', {
          PageIndex: this.pagination.current,
          PageRows: this.pagination.pageSize,
          SortField: this.sorter.field || 'Id',
          SortType: this.sorter.order,
          Search: this.queryParam,
          ...this.filters
        })
        .then((resJson) => {
          this.loading = false
          this.data = resJson.Data
          const pagination = { ...this.pagination }
          pagination.total = resJson.Total
          this.pagination = pagination
        })
    },
    getprintlist () {
      this.$http.post('/PB/PB_Printer/GetPrinterDataList', { Search: [{ Condition: 'TypeCode', Keyword: 'PrintReservoir' }] }).then((res) => {
        this.printlist = res.Data
      })
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
      this.Print.RackCode = selectedRows.map((item) => item.Code).join(',')
    },
    hasSelected () {
      return this.selectedRowKeys.length > 0
    },
    handlePrint (ids, Code) {
      this.Print.RackID = [ids]
      this.Print.RackCode = Code
      this.pid = [ids]
      //  this.boxflag = true
      // this.boxLoading = false
    },
    handleOk () {
      this.$http.post('/PB/PB_Rack/SelectRackID', this.Print).then((res) => {
        if (res.Success) {
          this.$message.success('打印成功')
          this.boxLoading = false
          this.boxflag = false

          this.getDataList()
        } else {
          this.boxLoading = false
          this.$message.error(res.Msg)
        }
      })
    },
    handlePrints (id) {
      if (id.length == 0) {
        this.$message.warning('请选择要打印的货架')
        return
      }
      this.selectid = id
      this.Print.RackID = id
    },
    confirms () {
      if (this.selectedRowKeys.length == 0) {
        this.$message.warning('请选择要打印的库区')
        return
      }
      this.boxflag = true
      this.boxLoading = false
    },
    cancels () {
      if (this.selectedRowKeys.length == 0) {
        this.$message.warning('请选择要打印的库区')
        return
      }
      this.$refs.batchPrinting.openDrawer(this.selectid, '批量打印库区')
    },
    hasSelecteds () {
      return this.selectedRowKeys.length > 0
    },
    hanldleAdd () {
      this.$refs.editForm.openForm(this.did, null, '新增货架')
    },
    confirm () {
      this.boxflag = true
      this.boxLoading = false
    },
    cancel () {
      this.$refs.batchPrinting.openDrawer(this.pid, '打印货架')
    },

    handleEdit (id) {
      this.$refs.editForm.openForm(this.did, id, '编辑货架')
    },
    handleDelete (ids) {
      // var thisObj = this
      // this.$confirm({
      //   title: '确认删除吗?',
      //   onOk() {
      //     return new Promise((resolve, reject) => {
      //       thisObj.$http.post('/PB/PB_Rack/DeleteData', ids).then((resJson) => {
      //         resolve()
      //
      //         if (resJson.Success) {
      //           thisObj.$message.success('操作成功!')
      //
      //           thisObj.getDataList()
      //         } else {
      //           thisObj.$message.error(resJson.Msg)
      //         }
      //       })
      //     })
      //   },
      // })
      this.$confirm('确认删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return new Promise((resolve, reject) => {
          this.$http.post('/PB/PB_Rack/DeleteData', ids).then(resJson => {
            resolve()

            if (resJson.Success) {
              this.$message.success('操作成功!')

              this.getDataList()
            } else {
              this.$message.error(resJson.Msg)
            }
          })
        }).catch(() => console.log('Oops errors!'))
      })
    },
    openDrawer (value) {
      // this.filters.AreaId = record.Id
      // this.storData = record
      this.did = value

      this.visible = true
      this.getDataList()
    },
    onDrawerClose () {
      this.visible = false
    }
  }
}
</script>
